<template>
  <!-- v-if="this.data.length !== 0"没有首页数据之前，没有渲染首页。 不会频繁没有首页数据进行所以用v-if -->
  <!-- 注册wheel事件，通过鼠标滑轮也能控制轮播图 -->
  <div class="home-container"   ref="container" @wheel = "handleWheel" v-loading="isLoading">  
      <Loading v-if="isLoading"/>
      <ul :style="{marginTop}" ref="lunboUl" class="lunbo-container">
        <li v-for="item in data" :key="item.id" >
          <!-- 轮播图每一具体页 -->
          <Carouselitem :carouselSrc="item.bigImg" :carouselPlaceholder="item.midImg" :carouselTitle="item.title" :carouselDescription="item.description"/>
        </li>
      </ul>
      <!-- 上下按钮 -->
      <div class="arrow arrowUp" @click="arrowUp(index + 1)" v-show="index < data.length - 1"><Icon type="arrowUp"/></div>
      <div class="arrow arrowDown" @click="arrowDown(index - 1)" v-show="index > 0"><Icon type="arrowDown"/></div>
      <!-- 指示器 -->
      <ul class="indicator">
        <li :class="{active:i === index}" v-for="(item, i) in data" :key="item.id" @click="indicator(i)"></li>
      </ul>
  </div>
</template>

<script>
import banner from "@/api/banner.js" //请求首页数据
import Carouselitem from "./Carouselitem.vue" //轮播图每一具体页
import Icon from "@/components/icon" //上下按钮的icon
import Loading from "@/components/loading" //loading效果
import fetchData from "../../mixins/fetchData" //请求数据
import debounce from "@/utils/bounce"
export default {
  beforeDestroy(){
    console.log("刷新也会导致组件销毁？")
  },
  created(){
    // this.useDebounce()
  },
  mixins:[fetchData([])],
  components:{
    Carouselitem,
    Icon,
    Loading,
  },
  data(){
    return {
      index:0, //移动到第几张图片
      contianerHeight:0, //可视区的高度
      isLunBoRoll:false, //是否有轮播图滚动处于过渡时间
    }
  },
  mounted(){
    this.contianerHeight =  parseInt(getComputedStyle(this.$refs.container).height)

    //使用addEventListener，能够绑定多个resize函数
    window.addEventListener("resize", this.handleResize)
  },
  destroyed(){
    // 切换到其他组件的时候，清除window上的事件
    window.removeEventListener("resize", this.handleResize)
  },
  computed:{
    marginTop(){ //ul移动的距离
      return -this.index * this.contianerHeight + 'px';
    }
  },
  methods:{
    useDebounce(){
      debounce(function (){
          // console.log(this)
      }, this)()
    },
    // fetchDat方法请求数据，并返回请求回来的数据
    async fetchData(){
      return await banner()
    },
    handleResize(){ //更新container的高度
      this.contianerHeight =  parseInt(getComputedStyle(this.$refs.container).height)
    },
    arrowUp(newIndex){
      if(newIndex > this.data.length - 1){
        this.index  = this.data.length - 1
      }else{
        this.index = newIndex;
      }
    },
    arrowDown(newIndex){
      if(newIndex < 0){
        this.index  = 0
      }else{
        this.index = newIndex;
      }
    },
    indicator(newIndex){
      this.index = newIndex
    },
    handleWheel(e){ //鼠标滑轮控制轮播图
      // 滚轮滑动太快，轮播图滚动需要过渡时间
      // 没有轮播图滚动正在过渡，允许鼠标滚轮滑动，否则不行
      if(this.isLunBoRoll){
        return;
      }

      if(e.deltaY <= -100){
        //滚轮向上滑

        if(this.index < this.data.length - 1){
          //轮播图向上滚动
          this.index += 1

          //轮播图滚动开始过渡
          this.isLunBoRoll = true;

          // 轮播图滚动过渡结束
          this.$refs.lunboUl.addEventListener("transitionend", () => {
            this.isLunBoRoll = false;
          }, {once:true}); 
        }
      }else if(e.deltaY >= 100){
        //滚轮向下滑

        if(this.index > 0){
          //轮播图向下滚动
          this.index -= 1

          //轮播图滚动开始过渡
          this.isLunBoRoll = true;

          // 轮播图滚动过渡结束
          this.$refs.lunboUl.addEventListener("transitionend", () => {
            this.isLunBoRoll = false;
          }, {once:true}); 
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
@import "~@/styles/mixin.less";
  .home-container{
    position:relative;
    width:100%;
    height:100%;
    ul{
      list-style-type:none;
      padding:0;
      margin:0;
    }
    .lunbo-container{
      width:100%;
      height:auto;
      list-style-type:none;
      transition:0.5s;
      li{
        width:100%;
        height:100vh;
      }
    }
    &:hover{
      .arrowUp{
        animation: arrowUp 2s infinite;
      }
      .arrowDown{
        animation: arrowDown 2s infinite;
      }
  
    }
    .arrow{
      position:absolute;
      width:100px;
      height:100px;
      text-align:center;
      left:50%;
      transform:translateX(-50%);
      font-size:30px;
      color:@gray;
      transition:0.5s;
      cursor:pointer;
      .icon-container{
        font-size:30px;
      }
      &.arrowUp{
        top:30px;
      }
      &.arrowDown{
        bottom:-30px;
      }
      @keyframes arrowUp {
        0%{
          transform:translate(-50%, -20%);
        }
        50%{
          transform:translate(-50%, 20%);
        }
        100%{
          transform:translate(-50%, -20%);
        }
      }
      @keyframes arrowDown {
        0%{
          transform:translate(-50%, 20%);
        }
        50%{
          transform:translate(-50%, -20%);
        }
        100%{
          transform:translate(-50%, 20%);
        }
      }
    }
    .indicator{
      position:absolute;
      top:50%;
      right:10%;
      transform:translateY(-50%);
      z-index:999;
      text-align:center;
      li{
        cursor:pointer;
        width:7px;
        height:7px;
        background-color:transparent;
        margin:7px 0px;
        border:3px solid #eee;
        border-radius:50%;
        &.active{
          background-color:#eee;
        }
      }
    }
  }
</style>